<template>
  <div>
    <div class="hot_top">
      <div class="ht_bg" :style="'background-image:url('+ playlistImg.coverImgUrl +')'">
        <div class="ht_de">更新日期:{{ playlist.updateTime | getDate }}</div>
      </div>
    </div>
    <div class="songlist">
      <div class="ht_creator" v-for="(song,inds) of playlist" :key="song.id">
        <div class="num">{{inds+1>9?inds+1:'0'+(inds+1)}}</div>
        <div class="info">
          <div class="song">
            {{ song.name }}
            <span v-for="(songs,indes) of song.alia" :key="indes">({{ songs }})</span>
          </div>
          <div class="singer">
              <span v-for="songer of song.ar" :key="songer.id">{{ songer.name }} </span>
              <span >- {{ song.al.name}}</span>
          </div>
        </div>
        <div class="icon">
          <span></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { log } from 'util';
export default {
  data() {
    return {
      playlist: [],
      playlistImg:{}
    };
  },
  methods: {
    list_top() {
      return this.$http.get("/api/top/list?idx=1");
    }
  },
  mounted() {
    this.$http.all([this.list_top()]).then(
      this.$http.spread(result => {
        // console.log(result.data.playlist);
        
          this.playlistImg = result.data.playlist;
          result.data.playlist.tracks.map((item,index)=>{
              if(index < 20){
                this.playlist.push(item)
              }
          })
          
      })
    );
  },
  filters: {
    getDate(item) {
      var d = new Date(item);
      let Month =
        d.getMonth() + 1 > 9 ? d.getMonth() + 1 : "0" + (d.getMonth() + 1);
      let day = d.getDate() > 9 ? d.getDate() : "0" + d.getDate();
      return `${Month}月${day}日`;
    }
  }
};
</script>
<style>
.ht_bg {
  height: 3rem;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  position: relative;
}
.ht_de {
  color: #fff;
  font-size: 0.3rem;
  position: absolute;
  top: 2.5rem;
  left: 0.5rem;
}
.ht_creator {
  display: flex;
  font-size: 0.35rem;
  padding: 10px;
}
.ht_creator .num {
  padding-right: 0.2rem;
  font-size: 0.3rem;
  margin-top: 5px;
}
.ht_creator:nth-child(-n + 3) .num {
  color: red;
}
.info {
  flex: 1;
  overflow: hidden;
}
.song {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.song span {
  color: rgb(124, 122, 122);
}
.singer {
    font-size: .25rem;
    color: rgb(124, 122, 122);
}
</style>